<template>
<div id="barMain">
    <div class="barBox">
        <div class="barBoxL" @click="pageTurn('-1')" v-if="index != 0">上一页</div>
        <div class="barBoxR" @click="pageTurn('+1')" v-if="index != (formData.length-1)">下一页</div>
    </div>
    <div id='print'>
      <div id="barCodeMain">
        <div style='flex:1' class='div_packageQuantity'>包裹数：{{obj.packageQuantity}}</div>
        <div class='div_svg'>
          <svg id="barcode">
          </svg>
        </div>
        <div style='flex:1'></div>
      </div>
      <div style='margin-top: 36px; margin-left: 12%; font-size: 16px;font-weight: 600;'>
        作业人：{{obj.staffName}}
      </div>
      <div v-for='v in obj.deliveryItemWithDistributionVOList' :key='v.goodCode'>
        <div style='margin-top: 15px;margin-left: 12%;font-size: 16px;font-weight: 500;'>
          <!-- {{`${v.goodsName} | ${v.goodsBarCode} | ${v.spec?v.spec:''} : ${v.totalNum?v.totalNum:''}${v.goodsUnitName}`}} -->
          {{`${v.goodsName} | ${v.goodsBarCode} | ${v.spec?v.spec:''} : ${v.combinationQuantity?v.combinationQuantity:''}${v.goodsUnitName}`}}
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-print="'#print'">打 印</el-button>
    </div>
</div>
</template>
<script>
import {packTaskprint } from '@/api/packManagement/prePackaged'
import JsBarcode from 'jsbarcode'
import { lastForOf } from 'xe-utils/methods'
export default{
  props:['printData'],
  data(){
    return{
      formData:[],
      obj:{},
      index: 0,
    }
  },
  created(){
    this.query()
  },
  methods:{
    query(){
      packTaskprint(this.printData).then(res=>{
        this.formData = res.data
        this.obj = res.data[this.index]
        this.barcode(res.data)
      })
    },
    barcode(data){
      const text = data[this.index].prepackagedCode
      this.obj = data[this.index]
      // const text = data[this.index].code
      if(this.obj.prepackagedCode) {
        JsBarcode("#barcode", text,{
          format: "CODE128", //选择要使用的条形码类型
          text,    //显示文本
          fontSize: 28,
          displayValue: true, //是否在条形码下方显示文字
          textPosition: "bottom", //设置文本的垂直位置
          background:'rgba(0,0,0,0)', //设置条形码的背景
          font:"fantasy", //设置文本的字体
          lineColor:"#000", //设置条和文本的颜色。
          margin:6 //设置条形码周围的空白边距
        })
      }else {
        JsBarcode("#barcode", 0,{
          format: "CODE128", //选择要使用的条形码类型
          text,    //显示文本
          fontSize: 28,
          displayValue: true, //是否在条形码下方显示文字
          textPosition: "bottom", //设置文本的垂直位置
          background:'rgba(0,0,0,0)', //设置条形码的背景
          font:"fantasy", //设置文本的字体
          lineColor:"#fff", //设置条和文本的颜色。
          margin:6 //设置条形码周围的空白边距
        })
      }
    },
    pageTurn(val) {
      this.index = Number(this.index) + Number(val)
      this.barcode(this.formData)
    },
  }
}
</script>
<style scoped>
#barMain{
    overflow: hidden;
    height: auto;
    position: relative;
    margin-bottom: 8px;
}
.barBox{
    position: relative;
    height: 20px;
    top:2px;
    width:94%;
    left:3%;
    z-index:999;

}
.barBoxL{
    float: left;
    cursor: pointer;
}
.barBoxR{
    float: right;
    cursor: pointer;
}
.dialog-footer {
    width:90px;
    text-align: right;
    font-size: 16px;
    font-weight: bolder;
    position: absolute;
    bottom:1px;
    right:5px;
    z-index:1000;
}
</style>
<style lang="scss">
#barCodeMain{
    height:100px;
    // position: relative;//父元素设置绝对定位
    display: flex;
    flex-direction: row;

}
.div_svg{
  flex:1
}
#barcode{
    width: 80%;
    // position:absolute;//相对定位
    // top:30px;
    // right:10%;
    margin:0 auto;
    height:100%;
}
.div_packageQuantity{
  text-align: center;
  font-size: 18px;
  font-weight:600;
  line-height: 15vh;
}
@media print {
 #barcode{
    left: 11px;
    right: 0%;
    top:0;
}
}
</style>
